import { listQuestionBankVOByPage } from "@/api/question-bank"
import {
  addQuestionBankQuestion,
  listQuestionBankQuestionVOByPage,
  removeQuestionBankQuestion
} from "@/api/question-bank-question"
import { Form, message, Modal, Select } from "antd"
import React, { useEffect, useState } from "react"

interface Props {
  questionId?: number
  visible: boolean
  onCancel: () => void
}

/**
 * 更新所属题库弹窗
 * @param props
 * @constructor
 */
const UpdateModal: React.FC<Props> = (props) => {
  const { questionId, visible, onCancel } = props
  const [form] = Form.useForm()
  const [questionBankList, setQuestionBankList] = useState<QuestionBankVO[]>([])

  // 获取题目所属题库列表
  const getCurrentQuestionBankIdList = async () => {
    try {
      const res = await listQuestionBankQuestionVOByPage({
        questionId,
        pageSize: 20
      })
      const list = (res.data?.records ?? []).map((item) => item.questionBankId)
      form.setFieldValue("questionBankIdList", list)
    } catch (error) {
      error instanceof Error && message.error("获取所属题库失败，" + error.message)
    }
  }

  useEffect(() => {
    if (questionId) {
      getCurrentQuestionBankIdList()
    }
  }, [questionId])

  // 全量获取所有题库
  const getQuestionBankList = async () => {
    try {
      const res = await listQuestionBankVOByPage({
        pageSize: 200,
        sortField: "createTime",
        sortOrder: "descend"
      })
      setQuestionBankList(res.data?.records ?? [])
    } catch (error) {
      error instanceof Error && message.error("获取题库列表失败，" + error.message)
    }
  }

  useEffect(() => {
    getQuestionBankList()
  }, [])

  const handleAddQuestionBankQuestion = async (value: number) => {
    const hide = message.loading("正在更新")
    try {
      await addQuestionBankQuestion({
        questionId: questionId!,
        questionBankId: value
      })
      hide()
      message.success("绑定题库成功")
    } catch (error) {
      hide()
      error instanceof Error && message.error("绑定题库失败，" + error.message)
    }
  }

  const handleRemoveQuestionBankQuestion = async (value: number) => {
    const hide = message.loading("正在更新")
    try {
      await removeQuestionBankQuestion({
        questionId: questionId!,
        questionBankId: value
      })
      hide()
      message.success("取消绑定题库成功")
    } catch (error) {
      hide()
      error instanceof Error && message.error("取消绑定题库失败，" + error.message)
    }
  }

  return (
    <Modal
      destroyOnClose
      title={"修改所属题库"}
      open={visible}
      footer={null}
      onCancel={() => {
        onCancel?.()
      }}
    >
      <Form form={form} style={{ marginTop: 24 }}>
        <Form.Item label="所属题库" name="questionBankIdList">
          <Select
            mode="multiple"
            style={{ width: "100%" }}
            options={questionBankList.map((questionBank) => ({
              label: questionBank.title,
              value: questionBank.id
            }))}
            onSelect={handleAddQuestionBankQuestion}
            onDeselect={handleRemoveQuestionBankQuestion}
          />
        </Form.Item>
      </Form>
    </Modal>
  )
}
export default UpdateModal
